<template>
  <div class="markSimosBox">
    <div class="abouttoStart">
      <!-- banner -->
      <div class="bannerAll">
        <img src="../../static/image/icon-marksimos.jpg" alt="" class="banner-img">
        <div class="banner-content">
          <img src="../../static/image/icon-title.png" alt="">
          <!-- <p class="banner-title">{{courseName}}</p> -->
          <p class="banner-title">《像CEO一样思考》商战模拟公开课</p>
          <p class="banner-desc">MarkSimos是全球首个基于新兴市场数据，由世界一流研发团队开发而成的在线商战模拟演练游戏</p>
          <!-- <span :endTime="endTime" :callback="callback" :endText="endText">{{time}}</span> -->
        </div>
      </div>
      <!-- banner end -->

      <!--main -->
      <div class="about-startMain">
        <!-- 课程即将开始 -->
        <div class="course-beginBox">
          <button class="look-result" @click="enterCourse()">进入课程</button>
          <!-- 课程详情 -->
          <div class="courseDeatilsBox">
            <div class="public-header">
              <h2 class="public-header-ch">课程详情</h2>
              <p class="public-header-en">COUSRE DETAILS</p>
              <div class="public-header-line"></div>
            </div>
            <div class="details-table">
              <table>
                <thead>
                  <tr>
                    <th>课程名称</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- {{courseData}} -->
                  <tr v-for="(item,index) in courseData" :key='index' :data-id="item.id">
                    <td>{{item.courseName}}</td>
                    <td>{{item.startTime | timeToYMD}}</td>
                    <td>{{item.endTime | timeToYMD}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 课程详情 end-->
        </div>
        <!-- 课程即将开始 end-->

        <!-- 学员 -->
        <div class="studentsBox">
            <div class="public-header">
              <h2 class="public-header-ch">学员</h2>
              <p class="public-header-en">TEAM MEMBER</p>
              <div class="public-header-line"></div>
            </div>
            <div class="studentsMain">
              <ul class="studentList">
                <li v-for="(list,listIndex) in memberData" :key='listIndex' :class="{'liMargin':memberData.length == 1}">
                  <img src="../../static/image/icon-default-avatar.png" alt="" v-if="list.headPictureUrl ==''">
                  <img :src="list.headPictureUrl" alt="" v-else>
                  <div>姓名：<span>{{list.name}}</span></div>
                  <div>职位：<span>{{list.position}}</span></div>
                  <div>手机号：<span>{{list.mobile}}</span></div>
                </li>
              </ul>
              
              <div class="panel-prepare-box">
                <div class="prepare-box strategy-guide-box">
                    <div class="prepare-box-cover">
                        <div class="header-ch">攻略百科</div>
                        <div class="header-en">STRATEGY GUIDE</div>
                        <div class="header-line"></div>
                        <div class="intro">地表最强百科，准备好为你排忧解难</div>
                        <router-link  to="/raiders-encyclopedia" class="enter-btn">点击进入</router-link>
                        <!-- <router-link  to="/raiders-encyclopedia" class="enter-btn">敬请期待</router-link> -->
                        <!-- <a class="enter-btn" href="">敬请期待</a> -->
                    </div>
                </div>
                <div class="prepare-box master-talks-box">
                    <div class="prepare-box-cover">
                        <div class="header-ch">大师讲坛</div>
                        <div class="header-en">MASTER TALKS</div>
                        <div class="header-line"></div>
                        <div class="intro">聆听大师声音，用大师智慧，帮助你获得胜利</div>
                        <a class="enter-btn">敬请期待</a>
                        <!-- <router-link  to="master-review" class="enter-btn">敬请期待</router-link> -->
                    </div>
                </div>
                <div class="prepare-box contests-review-box">
                    <div class="prepare-box-cover">
                        <div class="header-ch">高手回顾</div>
                        <div class="header-en">CONTESTS REVIEW</div>
                        <div class="header-line"></div>
                        <div class="intro">见证高手实力，汲取最佳参赛经验</div>
                        <router-link  to="/master-review" class="enter-btn">点击进入</router-link>
                    </div>
                </div>
            </div>

              
            </div>
        </div>
        <!-- 学员 end-->
      </div>
      <!--main end-->
    </div>
  </div>
</template>
<script>
    export default {
      data() {
        
        return {
          // 默认图像
            // defaultImg: 'this.src="' + require('../../static/image/icon-default-avatar-large.png') + '"'  ,
            courseData:{},
            memberData:[],
            // time:'',
            // courseName:'',
        }
      },
      // 倒计时
      // props:{
      //   endTime:{
      //     type:String,
      //     default:'',
      //   },
      //   endText:{
      //     type:String,
      //     default:'已结束',
      //   },
      //   callback:{
      //     type:Function,
      //     default:'',
      //   },
      // },
      methods:{
        // 倒计时
        // countdowm(timestamp){
        //   let self = this;
        //   let timer = setInterval(function(){
        //   let nowTime = new Date();
        //   let endTime = new Date(timestamp * 1000);
        //   let t = endTime.getTime() - nowTime.getTime();
        //   if(t>0){
        //     let day = Math.floor(t/86400000);
        //     let hour=Math.floor((t/3600000)%24);
        //     let min=Math.floor((t/60000)%60);
        //     let sec=Math.floor((t/1000)%60);
        //     hour = hour < 10 ? "0" + hour : hour;
        //     min = min < 10 ? "0" + min : min;
        //     sec = sec < 10 ? "0" + sec : sec;
        //     let format = '';
        //     if(day > 0){
        //       format = `${day}天${hour}小时${min}分${sec}秒`;
        //     } 
        //     if(day <= 0 && hour > 0 ){
        //       format = `${hour}小时${min}分${sec}秒`; 
        //     }
        //     if(day <= 0 && hour <= 0){
        //       format =`${min}分${sec}秒`;
        //     }
        //     self.content = format;
        //     }else{
        //     clearInterval(timer);
        //     self.content = self.endText;
        //     self._callback();
        //     }
        //   },1000);
        // },
        // _callback(){
        //   if(this.callback && this.callback instanceof Function){
        //     this.callback(...this);
        //   }
        // },
        // 倒计时
        //  getCountdown(){
        //   let userInfo = sessionStorage.getItem('login');
        //   let userId = JSON.parse(userInfo).id;
        //   let data = {
             // courseId:this.$route.params.id,
        //     userId:userId,
        //   }
        //   this.$http.topCountdown(data,(res)=>{
        //     this.courseName =res.data.courseName;
        //     console.log(res)
        //   },(errRes)=>{
        //     console.log(errRes)
        //   })
        // },

        // 课程详情
        getcourseData(){
          let data = {
            id:this.$route.params.id,
          }
          this.$http.studentCourse(data,(res)=>{
            this.courseData = res;
            console.log(res)
          },(errRes)=>{
            console.log(errRes)
          })
          
        },

        // 学员
        getmembersData(){
          let userInfo = sessionStorage.getItem('login');
          let userId = JSON.parse(userInfo).id;
          //console.log(userId)
          let data = {
            courseId:this.$route.params.id,
            userId:userId,
          }
          //console.log(data)
          this.$http.studentMembers(data,(res)=>{
            this.memberData =res.data.studentTeamMemberInfoList;
            // console.log(res)
          },(errRes)=>{
            console.log(errRes)
          })
        },
        // 进入课程
        enterCourse(){
          let userInfo = sessionStorage.getItem('login');
          let  userId = JSON.parse(userInfo).id;
          console.log(userId);
          let data = {
            courseId:this.$route.params.id,
            userId:userId,
          }
          this.$http.enterTheCourse(data,(res)=>{
            //this.$router.push(res.data);
          window.location.href = res.data;
          console.log(window.location.href);
            console.log(res)
          },(errRes)=>{
            console.log(errRes);
          })
        }

      },
      created(){

      },
      mounted(){
        this.getcourseData();
        this.getmembersData();
        //console.log(this.$route.params);
        // 倒计时
        // this.countdowm(this.endTime);
        // this.getCountdown();
      }
    }
  </script>